<template>
  <Vue3DraggableResizable
    :minW="getDraggableNumber(getCabinetMinWidth(props.selectInfo.type, props.selectInfo.id))"
    :minH="getDraggableNumber(getCabinetMinHeight(props.selectInfo.type, props.selectInfo.id))"
    :draggable="getdraggableDisabled(route.meta.loopType, props.selectInfo.disabled)"
    :resizable="getdraggableDisabled(route.meta.loopType, props.selectInfo.resizable)"
    :disabledY="props.selectInfo.disabledY"
    v-show="props.isShow"
    ref="draggableResizable"
    v-model:active="dragShow"
    @mousedown="preventDefaultDrag"
    @mouseup="handleMouseUp"
    :class="'draggable-id' + props.parentId"
    :id="props.selectInfo.resizable && commonStore.templateId !== 581876609753157 && 'resizable-free'"
    :w="getDraggableNumber(props.width)"
    :h="getExhibitsHeightRest(props.height)"
    :x="getDraggableNumber(props.defaultX)"
    :y="getExhibitsHeightRest(props.defaultY + (!route.meta.loopType ? 0.016 : 0))"
    @drag-end="handleDragStop"
    classNameDragging="dragging"
    @resizing="resizing"
    @resize-end="resizeEnd"
    @drag-start="dragStart"
    @resize-start="store.setHistoryListItem()"
    @dragging="dragging"
  >
    <!-- 0.162 -->
    <!-- :disabledY= -->
    <!-- :lockAspectRatio="true"  -->
    <!-- 这里是你想要拖动和调整大小的内容 -->
    <DraggableContainer :referenceLineColor="'rgba(255, 229, 0, 1)'">
      <div
        v-if="props.info.showpieceList && isShow"
        ref="contextMenuTrigger"
        class="exhibits-draggable border-hover-style"
        @contextmenu.stop="onContextMenu($event)"
        :style="{ width: props.width + 'rem', height: props.height + 'rem' }"
      >
        <ExhibitsComponent
          :childShow="childShow"
          :selectInfo="props.selectInfo"
          :AuxiliaryId="props.AuxiliaryId"
          :childId="props.childId"
          :width="props.info.width"
          :indexs="props.indexs"
          :height="props.info.height"
          @emitChildDraggable="emitChildItemDraggable"
          @emitChildDraggableStyle="emitChildItemDraggableStyle"
          @emitShowcaseDraggable="emitShowcaseDraggable"
          @emitShowcaseDraggableStyle="emitShowcaseDraggableStyle"
          :info="props.info"
        />

        <FlotMenu
          :selectInfo="props.selectInfo.id"
          v-if="!route.meta.loopType"
          :childId="props.childId"
          :indexs="props.indexs"
          :selectInfoType="props.selectInfo.id"
          :contextmenuExhibitId="-1"
          :materialType="5"
          :AuxiliaryId="props.AuxiliaryId || props.AuxiliaryId === 0 ? props.AuxiliaryId : -1"
        />
      </div>
    </DraggableContainer>
  </Vue3DraggableResizable>
</template>

<script setup lang="ts">
import ExhibitsComponent from '@/freeComponents/ExhibitsComponent/index.vue';
import draggableShowcase from '@/freeComponents/Showcase/draggableShowcase.vue'; //展柜
import { DraggableContainer } from 'vue3-draggable-resizable';
import draggableChildItem from './draggableChildItem.vue';
import FlotMenu from '@/components/flotMenu/groupMenu.vue';
import ContextMenu from '@imengyu/vue3-context-menu';
import {
  getDraggableNumber,
  getExhibitsHeightRest,
  getdisabledY,
  getCabinetMinWidth,
  getCabinetMinHeight,
} from '@/utils/getRemComputed';
import { ref, reactive, watch, nextTick, inject, defineExpose, computed } from 'vue';
import { exbitMenuShow, exbitListMenuShow } from '@/hooks/menuHooks';
import { useProjectStore, commonDataStore } from '@/store';
import { getdraggableDisabled } from '@/utils/minxin';
import { useRoute } from 'vue-router';

const route = useRoute();
const emit = defineEmits([
  'emitDraggable',
  'emitDraggableStyle',
  'emitChildDraggable',
  'emitChildDraggableStyle',
  'emitChildItemDraggable',
  'emitChildItemDraggableStyle',
  'emitShowcaseDraggable',
  'emitShowcaseDraggableStyle',
  'emitDraggableStart',
]);
const isShow = inject('DomisShow', {});
const store = useProjectStore();
const commonStore = commonDataStore();
const contextMenuTrigger = ref(); //列表盒子dom
const parentLock = ref(true);
const childShow = ref(true);
const dragShow = ref(false);
const draggableResizable = ref(); //父级拖拽盒子ref
const timer = ref();
const moveLock = ref(false); //
const setTimer = ref(); //定时器
const addWidth = ref(0);

const props = defineProps({
  selectInfo: {
    type: Object,
  },
  width: {
    type: Number || String,
  },
  height: {
    type: Number || String,
  },
  defaultX: {
    type: Number || String,
  },
  defaultY: {
    type: Number || String,
  },
  indexs: {
    type: Number,
  },
  MoveIndex: {
    type: Number,
  }, //标识当前操作的项
  parentId: {
    type: Number,
  },
  info: {
    type: Object,
  },
  childId: {
    type: Number,
  },
  isShow: {
    type: Boolean,
  },
  AuxiliaryId: {
    type: Number,
  },
});

const dragging = (draggingInfo: any) => {
  // timer.value = setTimeout(() => {
  //   let widths = getExhibitsHeightRest(props.height);
  //     let disabledType = getdisabledY(widths + draggingInfo.y);
  //   if (disabledType) {

  //     let viewportHeight = window.innerHeight * 0.89 - widths;
  //     draggableResizable.value.style.top = `${viewportHeight}px`;

  //     emit('emitDraggable', props.indexs, {
  //       x: draggingInfo.x,
  //       y: viewportHeight,
  //     });
  //     clearTimeout(timer.value);
  //     // emit('emitDraggable', props.indexs, {
  //     //   x: draggingInfo.x,
  //     //   y: viewportHeight,
  //     // });
  //     // draggableResizable.
  //     // return;
  //   }
  // }, 0);
  clearTimeout(timer.value);
  timer.value = setTimeout(() => {
    emit('emitDraggable', props.indexs, draggingInfo);
  }, 10); //传递当前展品距离相对父元素的xy偏移量变化
};
const handleDragStop = (draggingInfo: any) => {
  //拖拽结束事件

  setTimeout(() => {
    let widths = getExhibitsHeightRest(props.height);
    let disabledType = getdisabledY(widths + draggingInfo.y);
    emit(
      'emitDraggable',
      props.indexs,
      {
        x: draggingInfo.x,
        y: draggingInfo.y > 0 ? draggingInfo.y : 0,
      },
      'end',
    ); //传递当前展品距离相对父元素的xy偏移量变化

    store.SaveFreeInfoData();
  }, 10);
};
const onContextMenu = (e: any) => {
  e.preventDefault();
  if (route.meta.loopType) {
    return;
  }
  store.contextmenuchildId = props.childId;
  store.contextmenuGroupId = props.indexs;
  store.contextmenuExhibitId = -1;
  store.materialType = 5;
  exbitListMenuShow(e, props.AuxiliaryId || props.AuxiliaryId === 0 ? props.AuxiliaryId : -1);
};
const dragStart = (draggingInfo: any) => {
  store.setHistoryListItem();
  emit('emitDraggableStart', props.indexs, draggingInfo); //传递当前展品距离相对父元素的xy偏移量变化
};
const resizing = (draggingInfo: any) => {
  // emit('emitDraggable', props.indexs, draggingInfo);
  emit('emitDraggableStyle', props.indexs, draggingInfo); //设置当前展品距离相对父元素的宽高变化
};
const resizeEnd = (draggingInfo: any) => {
  //改变元素宽度函数

  setTimeout(() => {
    let widths = getExhibitsHeightRest(props.height);
    let disabledType = getdisabledY(widths + draggingInfo.y);
    if (disabledType) {
      let viewportHeight = window.innerHeight * 0.89 - widths;
      draggableResizable.value.style.top = `${viewportHeight}px`;

      emit(
        'emitDraggable',
        props.indexs,
        {
          x: draggingInfo.x,
          y: viewportHeight,
        },
        'end',
      );

      // draggableResizable.
      return;
    }
    emit('emitDraggableStyle', props.indexs, draggingInfo, 'end'); //设置当前展品距离相对父元素的宽高变化

    store.SaveFreeInfoData();
  }, 200);
};
const emitChildDraggable = (draggingInfo: any) => {
  emit('emitChildDraggable', props.indexs, draggingInfo); //传递当前展品图距离相对父元素的xy偏移量变化
};
const emitChildDraggableStyle = (draggingInfo: any) => {
  emit('emitChildDraggableStyle', props.indexs, draggingInfo); //设置当前展品图距离相对父元素的宽高变化
};

const emitChildItemDraggable = (draggingInfo: any, childIndex: number) => {
  emit('emitChildItemDraggable', props.indexs, draggingInfo, childIndex); //分组传递当前展品图距离相对父元素的xy偏移量变化
};
const emitChildItemDraggableStyle = (draggingInfo: any, childIndex: number) => {
  emit('emitChildItemDraggableStyle', props.indexs, draggingInfo, childIndex); //分组设置当前展品图距离相对父元素的宽高变化
};
const emitShowcaseDraggable = (draggingInfo: any) => {
  emit('emitShowcaseDraggable', props.indexs, draggingInfo); //传递当前展柜图距离相对父元素的xy偏移量变化
};
const emitShowcaseDraggableStyle = (draggingInfo: any) => {
  emit('emitShowcaseDraggableStyle', props.indexs, draggingInfo); //传递当前展柜距离相对父元素的宽高变化
};
const SetDragShow = () => {
  dragShow.value = false;
  // console.log('触发')
  // dragShow.value = false;
  // nextTick(() => {
  //   dragShow.value = true;
  // });
};

const handleMouseDown = (event) => {
  event.stopPropagation();
};
// document.addEventListener('mousemove', function (event) {
//   handleMouseMove(event);
// });
document.addEventListener('mouseup', function (event) {
  moveLock.value = false;
  // 在这里添加你的处理逻辑
});
const preventDefaultDrag = (event) => {
  if (route.meta.loopType) {
  } else {
    event.stopPropagation();
    moveLock.value = true;
  }
};
const handleMouseMove = (event) => {
  if (route.meta.loopType) {
  } else {
    if (!moveLock.value) {
      return;
    }
    clearTimeout(setTimer.value);
    setTimer.value = setTimeout(() => {
      var mouseX = event.clientX; //当前鼠标点位
      let viewportWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      //获取当前视口宽
      var distanceToRight = viewportWidth - mouseX; //获取鼠标距离最右侧的距离
      let scrollDom = document.getElementById('edit-scroll-box'); //祖级滚动元素

      // if (elementRect.width >= viewportWidth - 100) {
      if (distanceToRight <= 50) {
        scrollDom.scrollLeft += 80;
        // 在这里可以执行你需要的操作
      } else if (mouseX <= 50) {
        scrollDom.scrollLeft -= 80;
      }
    }, 20);
  }
};
const handleMouseUp = (event) => {
  if (route.meta.loopType) {
  } else {
  }
  moveLock.value = false;
};

const getdisplayBoardItem = computed(() => {
  switch (props.selectInfo.id) {
    case 25001:
      return 0.8555;
      break;
    default:
      return 0;
      break;
  }
});

watch(
  () => props.info.width,
  () => {
    childShow.value = false;
    nextTick(() => {
      childShow.value = true;
    });
  },
  { deep: true },
);
watch(
  () => props.info.height,
  () => {
    childShow.value = false;
    nextTick(() => {
      childShow.value = true;
    });
  },
  { deep: true },
);
watch(
  () => props.MoveIndex,
  () => {
    if (props.MoveIndex !== props.indexs) {
      SetDragShow();
    }
  },
  { deep: true },
);

defineExpose({ SetDragShow });
//
</script>

<style lang="less" scoped>
.exhibits-draggable {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  // background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 14px;
  margin-top: -2px;
  margin-left: -2px;
}
.exhibits-content {
  position: relative;
  display: flex;
  z-index: 999;
  padding: 0px;
}
.zg {
  position: absolute;
  bottom: 4px;
  left: 4px;
  max-width: calc(100% - 8px);
  max-height: calc(100% - 8px);
  width: calc(100% - 8px);
  height: auto;
  object-fit: contain;
}
.Showcase-parent {
  position: relative;
  bottom: 4px;
  left: 4px;
  max-width: calc(100% - 8px);
  max-height: calc(100% - 8px);
  width: calc(100% - 8px);
  height: 70%;
}
.active {
  :deep(.flot-menu) {
    display: flex;
  }
}
:deep(.active) {
  z-index: 999;
}
:deep(.vdr-handle) {
  z-index: 66;
}
:deep(.flot-menu-id16001) {
  top: 8px;
  left: -50px;
}
:deep(.flot-menu-id15003) {
  top: 8px;
  left: -50px;
}
:deep(.flot-menu-id45003) {
  top: 10px;
  z-index: 999;
}
:deep(.flot-menu-id45004) {
  top: 10px;
  z-index: 999;
}
:deep(.flot-menu-id45005) {
  top: 10px;
  z-index: 999;
}
:deep(.flot-menu-id45006) {
  top: 10px;
  z-index: 999;
}
:deep(.flot-menu-id45001) {
  top: 10px;
  z-index: 999;
}
:deep(.flot-menu-id36002) {
  top: 0rem;
  z-index: 1010;
}
:deep(.flot-menu-id65001) {
  top: 0rem;
  z-index: 1010;
}
:deep(.flot-menu-id65002) {
  top: 0rem;
  left: 200px;
  z-index: 1010;
}
:deep(.flot-menu-id65003) {
  top: 0rem;
  left: 140px;
  z-index: 1010;
}
::v-deep .flot-menu-id65004,
.flot-menu-id65005,
.flot-menu-id65006,
.flot-menu-id66001,
.flot-menu-id66006 {
  top: 0rem;
  z-index: 1010;
}
:deep(.flot-menu-id56001) {
  top: 0rem;
  z-index: 1010;
}
:deep(.flot-menu-id85001) {
  top: 0rem;
  z-index: 1010;
}
:deep(.flot-menu-id115001) {
  top: -23px;
}
:deep(.flot-menu-id115004) {
  top: 10px;
  z-index: 1010;
}
:deep .flot-menu-id115007,
.flot-menu-id115005,
.flot-menu-id115006,
.flot-menu-id115002,
.flot-menu-id115008,
.flot-menu-id105001 {
  top: -10px;
  z-index: 1010;
}
:deep(.flot-menu-id126001) {
  top: -0px;
  z-index: 1010;
}
:deep(.flot-menu-id126002) {
  top: 150px;
  z-index: 1010;
}
:deep(.flot-menu-id126003) {
  top: 100px;
  z-index: 1010;
}
:deep(.flot-menu-id136001) {
  top: 0;
  z-index: 1010;
}
:deep(.flot-menu-id145002) {
  left: -50px;
  top: 10px;
}
:deep(.flot-menu-id146001) {
  left: -50px;
  top: 10px;
}
:deep(.flot-menu-id155001) {
  top: 500px;
  z-index: 1010;
}
:deep(.flot-menu-id155002) {
  top: -32px;
  z-index: 1010;
}
:deep(.flot-menu-id156001) {
  top: -0px;
  z-index: 1010;
}
:deep(.flot-menu-id95004) {
  top: -0px;
  z-index: 1010;
}
:deep(.flot-menu-id95005) {
  top: -0px;
  z-index: 1010;
}
:deep(.flot-menu-id136005) {
  top: -0px;
  z-index: 1010;
}
</style>
